<!-- template-drive form -->

<div class="panel panel-primary">
  <div class="panel-heading">
    Sign Up!
  </div>

  <div class="panel-body">
    <form class="form-horizontal" novalidate autocomplete="off" (ngSubmit)="save(signupForm)" #signupForm="ngForm">
      <fieldset>
        <div class="form-group" [ngClass]="{'has-error': (firstNameVar.touched || firstNameVar.dirty) && firstNameVar.invalid }">
          <label class="col-md-2 control-label" for="firstNameId">First Name</label>

          <div class="col-md-8">
            <input class="form-control" id="firstNameId" type="text" placeholder="First Name (required)" required minlength="3" [(ngModel)]=customer.firstName
              name="firstName" #firstNameVar="ngModel" />
            <span class="help-block" *ngIf="(firstNameVar.touched || firstNameVar.dirty) && firstNameVar.invalid">
              <span *ngIf="firstNameVar.errors.required">
                Please enter your first name.
              </span>
              <span *ngIf="firstNameVar.errors.minlength">
                The first name must be longer than 3 characters.
              </span>
            </span>
          </div>
        </div>

        <div class="form-group" [ngClass]="{'has-error': (lastNameVar.touched || lastNameVar.dirty) && lastNameVar.invalid }">
          <label class="col-md-2 control-label" for="lastNameId">Last Name</label>

          <div class="col-md-8">
            <input class="form-control" id="lastNameId" type="text" placeholder="Last Name (required)" required maxlength="50" [(ngModel)]="customer.lastName"
              name="lastName" #lastNameVar="ngModel" />
            <span class="help-block" *ngIf="(lastNameVar.touched || lastNameVar.dirty) && lastNameVar.invalid">
              <span *ngIf="lastNameVar.invalid">
                Please enter your last name.
              </span>
            </span>
          </div>
        </div>

        <div class="form-group" [ngClass]="{'has-error': (emailVar.touched || emailVar.dirty) && emailVar.invalid }">
          <label class="col-md-2 control-label" for="emailId">Email</label>

          <div class="col-md-8">
            <input class="form-control" id="emailId" type="email" placeholder="Email (required)" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+"
              [(ngModel)]="customer.email" name="email" #emailVar="ngModel" />
            <span class="help-block" *ngIf="(emailVar.touched || emailVar.dirty) && emailVar.invalid">
              <span *ngIf="emailVar.errors.required">
                Please enter your email address.
              </span>
              <span *ngIf="emailVar.errors.pattern">
                Please enter a valid email address.
              </span>

              <!-- This one does not work -->
              <span *ngIf="emailVar.errors.email">
                Please enter a valid email address.
              </span>
            </span>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-offset-1 col-md-8 checkbox">
            <label>
              <input type="checkbox" [(ngModel)]="customer.sendCatalog" name="sendCatalog"> Send me your catalog
            </label>
          </div>
        </div>

        <div *ngIf="customer.sendCatalog">
          <div class="form-group">
            <label class="col-md-2 control-label">Address Type</label>
            <div class="col-md-8">
              <label class="radio-inline">
                <input type="radio" value="home" [(ngModel)]="customer.addressType" name="addressType">Home
              </label>
              <label class="radio-inline">
                <input type="radio" value="work" [(ngModel)]="customer.addressType" name="addressType">Work
              </label>
              <label class="radio-inline">
                <input type="radio" value="other" [(ngModel)]="customer.addressType" name="addressType">Other
              </label>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label" for="street1Id">Street Address 1</label>
            <div class="col-md-8">
              <input type="text" class="form-control" id="street1Id" placeholder="Street address" [(ngModel)]="customer.street1" name="street1">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label" for="street2Id">Street Address 2</label>
            <div class="col-md-8">
              <input type="text" class="form-control" id="street2Id" placeholder="Street address (second line)" [(ngModel)]="customer.street2"
                name="street2">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label" for="cityId">City, State, Zip Code</label>
            <div class="col-md-3">
              <input type="text" class="form-control" id="cityId" placeholder="City" [(ngModel)]="customer.city" name="city">
            </div>
            <div class="col-md-3">
              <select class="form-control" id="stateId" [(ngModel)]="customer.state" name="state">
                <option value="" disabled selected hidden>Select a State...</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
              </select>
            </div>
            <div class="col-md-2">
              <input type="number" class="form-control" id="zipId" placeholder="Zip Code" [(ngModel)]="customer.zip" name="zip">
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-4 col-md-offset-2">
            <span>
              <button class="btn btn-primary" type="submit" [disabled]="signupForm.invalid">
                Save
              </button>
            </span>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>
<br>Dirty: {{ signupForm.dirty }}
<br>Touched: {{ signupForm.touched }}
<br>Valid: {{ signupForm.valid }}
<br>Value: {{ signupForm.value | json }}
